import React,{Component} from "react"
import BScroll  from "better-scroll";

import "./index.css"

import {getGoodWorkList} from "../../api/course.js";

class Index extends Component{
    constructor(props){
       super(props);
       this.state = {
             page:0,
             list:[]
       }
    }
    
    componentDidMount(){
      
      this.loadData();
    	this.getList(0);
    }

    loadData(){
    	this.list = new BScroll(this.refs.list,{
            scrollY: true,
            click: true,
            pullUpLoad: {
              threshold:-20 
            },
            pullDownRefresh: {
               threshold:30,
               stop: 0
            }
        })
        
        
        this.list.on('pullingUp',()=>{
            //console.log("到底部了")
            this.setState({
              page:this.state.page+10
            },()=>{
                this.getList(this.state.page);
            })
            setTimeout(() => {
                this.list.finishPullUp();
                this.list.refresh();
            },500)
         
        })
    }
	
    
    getList(page){
        if(localStorage.getItem("courseUserinfo")){
            let {AppUserId} = JSON.parse(localStorage.getItem("courseUserinfo"));
            getGoodWorkList(this.props.match.params.id,page)
            .then(res=>{
                res.data.forEach((item,index)=>{
                  if(item.AppUserId==AppUserId){
                      res.data.unshift(res.data.splice(index,1)[0])
                  }
                })
    
                this.setState({
                    list:[...this.state.list,...res.data]
                })
            })
      }else{
          getGoodWorkList(this.props.match.params.id,page)
            .then(res=>{
               
    
                this.setState({
                    list:[...this.state.list,...res.data]
                })
            })
      }
        
    }


  render(){
    let {list} = this.state;
		return(
           <div className="assignments">
                <div className="assignments-header">
                   <span className="back" onClick={()=>{
                    this.props.history.goBack();
                   }}></span>
                  <h3>优秀学员作业</h3>
                </div>
                
                <div className="list" ref="list">
                    <ul>
                      {list.map((item,index)=>{
                         return <li key={index} onClick={()=>{this.props.history.push("/fanscourse/workdetail/"+item.PostId)}}>
                                    {item.PhotoList.length!==0?<img src={item.PhotoList[0]?item.PhotoList[0].ThumbnailUrl:""} alt=""/>:null}
                                    {item.VideoList.length!==0?<img src={item.VideoList[0]?item.VideoList[0].ThumbnailUrl:""} alt=""/>:null}
                                    <div>
                                       <img src={item.AppUserModel.ImageUrl} alt=""/>
                                       <span>{item.AppUserModel.NickName}</span>
                                       <em></em>
                                    </div> 
                               </li>
                      })}
                    </ul>
                </div>
           </div>
		)
	}
}

export default Index